import React, { useState } from "react";
import { Badge, TabBar } from "antd-mobile";
import { Outlet } from "react-router-dom";
import {
  AppOutline,
  MessageOutline,
  MessageFill,
  UnorderedListOutline,
  UserOutline,
} from "antd-mobile-icons";
import style from "../css/index.module.css"
import {useNavigate} from "react-router-dom"
export default () => {
    const tabs = [
      {
        key: "",
        title: "找绘本",
        icon: <AppOutline />,
        badge: Badge.dot,
      },
      {
        key: "book",
        title: "找书单",
        icon: <UnorderedListOutline />,
        badge: "5",
      },
      {
        key: "listen",
        title: "听故事",
        icon: (active: boolean) =>
          active ? <MessageFill /> : <MessageOutline />,
        badge: "99+",
      },
      {
        key: "mine",
        title: "我的",
        icon: <UserOutline />,
      },
    ];
    let nav=useNavigate();
  return (
    <div>
      <div className={style.box}>
        <Outlet></Outlet>
      </div>

      <div className={style.footer}>
        <TabBar
          onChange={(key: any): any => {
            nav(key);
          }}
          safeArea={true}
        >
          {tabs.map((item) => (
            <TabBar.Item key={item.key} icon={item.icon} title={item.title} />
          ))}
        </TabBar>
      </div>
    </div>
  );
};
